<template>
	<view class="bank-card public345">
		<view class="bank-card-top">
			我的银行卡（{{bankCardDatas.length}}）
		</view>

		<!-- 银行卡 -->
		<view class="bank-card-item" v-for="(item,index) in bankCardDatas" :key="index">
			<view class="bank-card-left">
				<image :src="item.src" mode="widthFix" class="bank-card-logo"></image>
				<view class="bank-card-type">
					<text class="bank-card-name">{{item.name}}</text>
					<text>{{item.type}}</text>
				</view>
			</view>
			<view>
				{{'**** '+item.number.slice(-4)}}
			</view>
		</view>

		<!-- 添加银行卡 -->
		<view class="add-card" @click="goAddBankCard">
			<uni-icons type="plus" size="30rpx"></uni-icons>
			<text style="margin-left: 16rpx;">添加银行卡</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankCardDatas: [{
					src: this.imageUrl('logo.png'),
					name: '中国银行',
					type: '储蓄卡',
					number: '16284363283637346587'
				}, {
					src: this.imageUrl('logo2.png'),
					name: '农业银行',
					type: '储蓄卡',
					number: '162843632836373465'
				}]
			}
		},
		methods: {
			goAddBankCard() {
				uni.navigateTo({
					url: '/pages/restmoney/AddBankCard'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F8F9FA;
	}

	.bank-card {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;

		.bank-card-top {
			padding: 32rpx 0;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 28rpx;
		}

		.bank-card-item {
			display: flex;
			justify-content: space-between;
			width: 690rpx;
			height: 124rpx;
			padding: 32rpx 36rpx;
			border-radius: 16rpx;
			margin-top: 18rpx;
			background: #fff;
			box-shadow: 0 8rpx 12rpx -2rpx rgba(0, 0, 0, .1), 0 4rpx 8rpx -2rpx rgba(0, 0, 0, .06);
			box-sizing: border-box;

			.bank-card-left {
				display: flex;

				.bank-card-logo {
					width: 48rpx;
					height: 48rpx;
					margin-top: 8rpx;
				}

				.bank-card-type {
					padding-left: 16rpx;
					font-size: 24rpx;
					line-height: 24rpx;
					color: #666;

					.bank-card-name {
						display: block;
						margin-bottom: 8rpx;
						font-size: 28rpx;
						line-height: 28rpx;
						color: #333;
					}
				}
			}
		}

		.add-card {
			width: 690rpx;
			margin-top: 32rpx;
			background-color: #fff;
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			box-shadow: 0 8rpx 12rpx -2rpx rgba(0, 0, 0, .1), 0 4rpx 8rpx -2rpx rgba(0, 0, 0, .06);
		}
	}
</style>